<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>涨跌幅——CHG</title>
    <link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../css/home.css"/>
    <link rel="stylesheet" type="text/css" href="../css/index1.css"/>
    <link rel="stylesheet" type="text/css" href="../css/chg.css"/>
</head>

<body>
<div class="wrap">
    <div class="container">
        <!--导航栏-->
        <header>
            <div class="content">
                <a href="/index.html" class="headerLogo">
                    <img class="logoimg" src="../img/logo.png" alt="logo"/>
                    <img class="logofont" src="../img/font_logo.png" alt="logofont"/>
                </a>
                <ul class="headerNav">
                    <!--<li class="active" style="opacity: 1.0;">-->
                    <!--<div class="homeOption">自选</div>-->
                    <!--<div class="optional">-->

                    <!--</div>-->
                    <!--</li>-->
                    <li class="active">
                        <div class="homeVol">市值</div>
                    </li>
                    <li class="active jys" style="position: relative;">
                        <div class="jys_name">交易所</div>
                        <div class="bourse">
                            <ul style="color: #000;">
                            </ul>
                            <span class="jys_arro"></span>
                        </div>
                    </li>
                </ul>
                <div class="headerAdv">
                    <img src="../img/home_ad_img.jpg" alt="navAdv"/>
                </div>
            </div>
        </header>
        <!--内容区-->
        <section>
            <div class="content center" style="background:initial">
                <!--内容区，左大块列表-->
                <div class="left_content" style="padding:20px 0 ;">
                    <div class="list_header" style="height: auto;border-bottom: none;">
                        <div class="header_font">
                            <div class="header_title">
                                <div class="title_rise act" id="rises">
                                    <p>涨幅排行榜</p>
                                    <span class="title_line line_act"></span>
                                </div>
                                <div class="title_fall " id="falls">
                                    <p>跌幅排行榜</p>
                                    <span class="title_line "></span>
                                </div>
                            </div>
                            <p class="header_select">
                                <select class="select_list">
                                    <option value="">
                                        人民币CNY
                                    </option>
                                    <!--<option value="">-->
                                    <!--日元JPY-->
                                    <!--</option>-->
                                    <!--<option value="">-->
                                    <!--美元USD-->
                                    <!--</option>-->
                                    <!--<option value="">-->
                                    <!--韩元KRW-->
                                    <!--</option>-->
                                </select>
                                <span class="font_notice">24小时内，涨幅超过500万</span>
                            </p>
                        </div>

                        <ul class="list_title">
                            <li class="sort" style="">
                                <span class="rank_x"
                                      style="background-color: inherit;color: inherit;line-height: 45px;">#</span>
                            </li>
                            <li class="name">名称</li>
                            <li class="symbol">简称</li>
                            <li class="volume">成交额</li>
                            <li class="value">价格</li>
                            <li class="chg_val">变化幅度</li>
                            <!--<li class="trend" style="margin-right: 20px;">价格趋势(7d)</li>-->
                        </ul>
                    </div>
                    <ul class="list_content" id="chgPad">

                    </ul>
                </div>

                <div class="right_content">

                    <div class="right_bottom">
                        <p class="rise_title">
                            <span class="rise selected">涨幅榜</span>
                            <!--<span class="fall">跌幅榜</span>-->
                            <a href="chg.html" class="more_btn"></a>
                        </p>

                        <div class="range_pad">
                            <p class="range_notice">5分钟内涨跌幅超过2%</p>
                            <ul class="range_title">
                                <!--<li class="btc_rank" style="color: #000000;">排行</li>-->
                                <li class="btc_sort">名称</li>
                                <li class="btc_value">价格</li>
                                <li class="btc_percent">24h涨幅</li>
                                <li class="btc_volume">成交额</li>
                            </ul>

                            <ul class="range_lists">
                                <li class="range_line">
                                    <ul>
                                        <!--<li class="btc_rank rank1">1</li>-->
                                        <li class="btc_sort">
                                            <img src="../img/setting_hlgl@2x.png" class="btc_icon"/>
                                            <span class="btc_name">BTC</span>
                                        </li>
                                        <li class="btc_value">￥1054.29</li>
                                        <li class="btc_percent percent_rise">+22.89%</li>
                                        <li class="btc_volume">6,7363万</li>
                                    </ul>
                                </li>

                                <li class="range_line">
                                    <ul>
                                        <!--<li class="btc_rank rank2">2</li>-->
                                        <li class="btc_sort">
                                            <img src="../img/setting_hlgl@2x.png" class="btc_icon"/>
                                            <span class="btc_name">MIOTA</span>
                                        </li>
                                        <li class="btc_value">￥1054.29</li>
                                        <li class="btc_percent percent_rise">+22.89%</li>
                                        <li class="btc_volume">6,7363万</li>
                                    </ul>
                                </li>

                                <li class="range_line">
                                    <ul>
                                        <!--<li class="btc_rank rank3">3</li>-->
                                        <li class="btc_sort">
                                            <img src="../img/setting_hlgl@2x.png" class="btc_icon"/>
                                            <span class="btc_name">MIOTA</span>
                                        </li>
                                        <li class="btc_value">￥1054.29</li>
                                        <li class="btc_percent percent_fall">+22.89%</li>
                                        <li class="btc_volume">6,7363万</li>
                                    </ul>
                                </li>

                                <li class="range_line">
                                    <ul>
                                        <!--<li class="btc_rank rank_x">4</li>-->
                                        <li class="btc_sort">
                                            <img src="../img/setting_hlgl@2x.png" class="btc_icon"/>
                                            <span class="btc_name">MIOTA</span>
                                        </li>
                                        <li class="btc_value">￥1054.29</li>
                                        <li class="btc_percent percent_rise">+22.89%</li>
                                        <li class="btc_volume">6,7363万</li>
                                    </ul>
                                </li>

                                <li class="range_line">
                                    <ul>
                                        <!--<li class="btc_rank rank_x">5</li>-->
                                        <li class="btc_sort">
                                            <img src="../img/setting_hlgl@2x.png" class="btc_icon"/>
                                            <span class="btc_name">MIOTA</span>
                                        </li>
                                        <li class="btc_value">￥1054.29</li>
                                        <li class="btc_percent percent_rise">+22.89%</li>
                                        <li class="btc_volume">6,7363万</li>
                                    </ul>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!--尾部-->
        <footer>
            <div class="content">
                <p class="copyright">copyright © 2018 KKTOKEN，粤ICP备17140751号-1·Powered By Weilaicaij</p>
                <ul class="linksTo">
                    <li>友情链接:</li>
                    <li>
                        <a href="http://www.8btc.com/" target="_blank">巴比特</a>
                    </li>
                    <li>
                        <a href="http://www.jinse.com/" target="_blank">金色财经</a>
                    </li>
                    <li>
                        <a href="https://www.btc123.com/" target="_blank">BTC123</a>
                    </li>
                    <li>
                        <a href="http://chainb.com/" target="_blank">铅笔</a>
                    </li>
                    <li>
                        <a href="https://www.coindesk.com/" target="_blank">coindesk</a>
                    </li>
                    <li>
                        <a href="http://www.qukuaiwang.com.cn/" target="_blank">区块链导航</a>
                    </li>
                    <li>
                        <a href="http://www.qukuaiwang.com.cn/" target="_blank">区块链</a>
                    </li>
                    <li>
                        <a href="https://www.7234.cn/" target="_blank">链世界</a>
                    </li>
                    <li>
                        <a href="https://www.feixiaohao.com/" target="_blank">非小号</a>
                    </li>
                    <li>
                        <a href="https://www.binance.com/" target="_blank">币安</a>
                    </li>
                    <li>
                        <a href="https://www.coingogo.com/" target="_blank">币源社区</a>
                    </li>
                    <li>
                        <a href="http://bitkan.com/" target="_blank">币看</a>
                    </li>
                    <li>
                        <a href="https://www.coolcoin.com/" target="_blank">酷币</a>
                    </li>
                    <li>
                        <a href="https://www.btc98.com/" target="_blank">比特酒吧</a>
                    </li>
                    <li>
                        <a href="http://sl.vc/" target="_blank">共享财经</a>
                    </li>
                    <li>
                        <a href="http://www.chainfor.com/" target="_blank">链向财经</a>
                    </li>
                    <li>
                        <a href="http://jgy.com/" target="_blank">九个亿财经</a>
                    </li>
                </ul>
            </div>
        </footer>
    </div>
</div>
</body>
<script src="../js/jquery-2.1.1.js" type="text/javascript" charse="utf-8"></script>
<script src="../js/index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var urlhead = 'http://api.btcdata.top/api/api_kktoken';

  $(".nav_optional").click(function () {
    window.location.href = "/index.html"
  });

  $(function () {
    ajaxRise();
    getExchange();
  });

  var changes = "performer";
  $("#rises").click(function () {
    changes = 'performer';
    $("#chgPad").empty();
    ajaxRise(changes);
    $(this).addClass("act");
    $("#rises span").addClass("line_act");
    $("#falls").removeClass("act");
    $("#falls span").removeClass("line_act");
  });

  $("#falls").click(function () {
    changes = 'drop';
    $("#chgPad").empty();
    ajaxRise(changes);
    $(this).addClass("act");
    $("#falls span").addClass("line_act");
    $("#rises").removeClass("act");
    $("#rises span").removeClass("line_act");

  });

  function ajaxRise() {

    $.get(urlhead + '/' + changes + '?page_size=50', function (res) {

      var num = res.data.total;
      if (num >= 50) {
        num = 50;
      }
      //				var num = 20;
      for (var i = 0; i < num; i++) {
        var chg_name = res.data.lists[i].name,
          chg_img = res.data.lists[i].icon_url,
          chg_symbol = res.data.lists[i].coin_symbol,
          chg_vol = res.data.lists[i].volume_cny,
          chg_rmb = res.data.lists[i].price_cny,
          chg_per = res.data.lists[i].percent_change24h,
          id = res.data.lists[i].id,
          ranges = i + 1
        if (chg_name.length >= 10) {
          chg_name = chg_name.slice(0, 10);
        }

        if ((chg_vol.split(".")[0].length) > 9 || (chg_vol.split(".")[0].length) == 9) {
          chg_vol = changeTwoDecimal(chg_vol * 0.00000001) + "亿";
        } else if ((chg_vol.split(".")[0].length) > 5 || (chg_vol.split(".")[0].length) == 5) {
          chg_vol = changeTwoDecimal(chg_vol * 0.0001) + "万";
        } else {
          chg_vol = changeTwoDecimal(chg_vol);
        }

        if ((chg_rmb.split(".")[0].length) > 9 || (chg_rmb.split(".")[0].length) == 9) {
          chg_rmb = changeTwoDecimal(volSup * 0.00000001) + "亿";
        } else if ((chg_rmb.split(".")[0].length) > 5 || (chg_rmb.split(".")[0].length) == 5) {
          chg_rmb = changeTwoDecimal(chg_rmb * 0.0001) + "万";
        } else {
          chg_rmb = changeTwoDecimal(chg_rmb);
        }
        ;

        chg_per = changeTwoDecimal(chg_per);

        if ((chg_img == "") || (chg_img == null)) {
          chg_img = "../img/home_coin@2x.png";
        }
        $('.list_content').append('<li class="list_data" onclick="toDetail('+ id +',\'\')">' +
          '<ul class="list_line">' +
          '<li class="sort" id="chgs_' + ranges + '">' +
          '<span class="rank_x">' + ranges + '</span>' +
          '</li>' +
          '<li class="name">' +
          '<span><img src="' + chg_img + '" class="btcIcon"/></span>' +
          '<a href="###">' +
          '<span>' + chg_name + '</span>' +
          '</a>' +
          '</li>' +
          '<li class="symbol">' + chg_symbol + '</li>' +
          '<li class="volume">￥' + chg_vol + '</li>' +
          '<li class="value">￥' + chg_rmb + '</li>' +
          '<li class="chg_val val_rise">' + chg_per + '%</li>' +
          '</ul>' +
          '</li>');

        if (ranges == 1) {
          $("#chgs_1 .rank_x").addClass("rank1");
        } else if (ranges == 2) {
          $("#chgs_2 .rank_x").addClass("rank2");
        } else if (ranges == 3) {
          $("#chgs_3 .rank_x").addClass("rank3")
        }

        if (changes != "drop") {
          $(".list_data .chg_val").removeClass("val_rise");
          $(".list_data .chg_val").addClass("val_fall")
        } else {
          $(".list_data .chg_val").removeClass("val_fall");
          $(".list_data .chg_val").addClass("val_rise")
        }

      };
    }, 'json');
  }

</script>
</html>